<template>
	<view id="analyze_container">
		<!-- 顶部导航栏 -->
		<view class="my_navigate" :style="{ height: `${naviHeight}px` }">
			<view class="return_icon_box" :style="{ top: `${naviHeight / 2}px` }" @click="returnHandle">
				<image class="return_icon" src="../../static/return.png" mode="widthFix"></image>
			</view>
			<view class="title" :style="{ paddingTop: `${naviHeight / 2 - 16}px` }">性格分析</view>
		</view>
		<!-- 切换栏 -->
		<view class="switch_box" v-if="showSwitch">
			<view class="mbti_item" v-for="(item, index) of mbtiStrsList" :key="index" :class="{ selected: item == selected }" @click="selectHandle(item)">
				{{ item }}
			</view>
		</view>
		<view :style="{ height: `${naviHeight}px` }"></view>
		<!-- 分析结果 -->
		<view class="analyze_result_box">
			<div v-html="parsedMarkdown"></div>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { marked, options } from 'marked';
import { onLoad } from '@dcloudio/uni-app';

// 切换栏控制器
let showSwitch = ref(false);
// 性格类型列表
let mbtiStrsList = ref();
// 选中的切换栏
let selected = ref("");
// 转换后的html内容
let parsedMarkdown = ref("");
// 动态获取导航栏高度，适配不同机型
let naviHeight = ref();
let needUpdate = ref(true);

onMounted(()=>{
	// 获取本地存储中的性格类型，显示性格分析
	showAnalyze();
	// 更新数据库信息
	updateData();
	const systemInfo = uni.getSystemInfoSync();
	const navBarHeight = systemInfo.statusBarHeight + (systemInfo.platform === 'ios' ? 44 : 48); // 根据平台计算导航栏高度
	// console.log("系统导航栏高度：", navBarHeight);
	naviHeight.value = navBarHeight;
})

 onLoad((options) => {
	 if(options.type === "0"){
		needUpdate.value = false;
	 }
 });

// 返回按钮
function returnHandle(){
	uni.switchTab({
		url:"/pages/index/index"
	})
}

// 选择控制器
function selectHandle(selectItem){
	selected.value = selectItem;
	// 根据所选性格类型重新渲染分析结果
	selectAnalyzeResult(selectItem)
}

function showAnalyze(){
	// 取性格测试结果列表
	mbtiStrsList.value = JSON.parse(uni.getStorageSync("mbti-strs"));
	// 判断测试结果的个数（多个显示顶部切换栏）
	if(mbtiStrsList.value.length == 1){
		selectAnalyzeResult(mbtiStrsList.value[0]);
		showSwitch.value = false;
		selected.value = mbtiStrsList.value[0];
		return 1;
	}

	showSwitch.value = true;
	selected.value = mbtiStrsList.value[0];
	// 优先显示第一个，其他的通过点击切换栏后更新显示结果
	selectAnalyzeResult(mbtiStrsList.value[0]);
}

// 查询分析结果
async function selectAnalyzeResult(mbtiStr){
	// 根据mbti性格字符串查询md文档，转为html后显示
	const res = await uni.$http.get(`/common/download?docName=${mbtiStr}.md`);
	// 将md文档转为html显示
	parsedMarkdown.value = marked(res.data);
}

// 更新数据库中信息：将测试结果存入数据库，方便二次查询
async function updateData(){
	// 检查是否需要更新，测试页面跳转过来的才需要更新
	if(!needUpdate.value){
		return 1;
	}
	// 构造请求数据
	let requestParam = {openId: uni.getStorageSync("openId"), testResult: uni.getStorageSync("mbti-strs")};
	const res  = await uni.$http.put(`/payInfos/testFinish`, requestParam);
	if(res.data.code == 0){
		uni.showToast({
			title: '数据更新失败!',
			icon:"none"
		});
		return 1;
	}
}
</script>

<style lang="scss" scoped>
.switch_box {
	display: flex;
	position: relative;
}

.mbti_item {
	padding: 5px 10px;
	width: 25%;
	border: solid lightgrey 1px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 15px;
}

.selected {
	color: #308cb3;
}

p {
	line-height: 30px;
}

.analyze_result_box {
	padding: 10px 15px;
	line-height: 45px;
}

.my_navigate {
	// height: 65px;
	background-color: #ebebeb;
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100vw;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0px 10px;
}

.return_icon_box {
	position: absolute;
	left: 10px;
	top: 27px;
}

.return_icon {
	width: 25px;
}

.title {
	margin: 0 auto;
	// padding-top: 12px;
}
</style>
